<template>
    <div class="user-data">
        <div class="user-data-header">您当前已发展<span>{{data.length}}</span>名用户</div>
        <div class="user-data-content">
            <ul>
                <li v-for="user in data" :key="user.uid" @click="goDetail(user)">
                    <span><img :src="user.headImg" alt=""> <span class="username">{{user.username}}</span></span>
                    <span><i class="icon-city"></i> <span class="city">{{user.city}}</span> <i class="arrow"></i></span>
                    
                </li>
            </ul>
        </div>
        <div class="serach-btn" @click="popupVisible = true">筛选</div>
        <mt-popup v-model="popupVisible" position="right" class="search-panel">
            <p class="form-item label">按昵称搜索</p>
            <p class="form-item">
                <input type="text" v-model="params.username" placeholder="用户姓名">
            </p>        
            <p class="form-item label">按手机号搜索</p>
            <p class="form-item">
                <input v-model="params.telephone" type="text">
            </p>
            <p class="form-item label">按注册方式搜索</p>
            <p class="form-item">
                <span class="s-input" @click="sheetVisible = true" type="text">{{sourceTypeLabel}}</span>
                <span class="corner">
                    <img src="../../assets/img/sanjiaoup.png" alt="">
                    <img src="../../assets/img/sanjiaodown.png" alt="">
                </span>
            </p>
            <p class="form-item label">按地域搜索</p>
            <p class="form-item">
                <span class="s-input" @click="showCity = true" type="text">{{pandc}}</span>
                <span class="corner">
                    <img src="../../assets/img/sanjiaoup.png" alt="">
                    <img src="../../assets/img/sanjiaodown.png" alt="">
                </span>
            <p>
            <!-- <p class="form-item form-province">
                <span class="corner-pro">
                    <input @click="shouProvince = true" v-model="sheng" type="text">
                    <img src="../../assets/img/sanjiaoup.png" alt="">
                    <img src="../../assets/img/sanjiaodown.png" alt="">
                </span>
                <span class="corner-pro">
                    <input @click="shouProvince = true" v-model="sheng" type="text">
                    <img src="../../assets/img/sanjiaoup.png" alt="">
                    <img src="../../assets/img/sanjiaodown.png" alt="">
                </span>
            <p> -->
                <!--省略-->
            </p>
            <p class="sure-btn">
                <span @click="closeSearch">返回</span>
                <span @click="searchValue">确认</span>
            </p>
        </mt-popup>
        <mt-popup v-model="showCity" position="bottom" class="province-panel">
            <p class="provice-pop-btn"><span @click="showCity = false">确定</span></p>
            <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
        </mt-popup>
        <mt-actionsheet
            :actions="resouceActions"
            cancelText=""
            v-model="sheetVisible">
        </mt-actionsheet>
        <!-- <com-footer :currentIndex="cuIndex"></com-footer> -->
    </div>
</template>
<script>
    import filter from '../../api/filter.js'
    import comFooter from '../../components/comFooter';
    import dataApi from '../../api/data.js';
    import { Toast, Actionsheet } from 'mint-ui';
    import comSearch from '../../components/comSearch';
    import { Picker } from 'mint-ui';
    import myaddress from './data/address.json';
    export default {
        components: {
            comFooter,
            comSearch,
            Actionsheet,
            'mt-picker': Picker
        },
        data () {
            return {
                popupVisible: false,
                sheetVisible: false,
                data: [],
                params: {
                    sourceType: '0'
                },
                resouceActions: [],
                sourceTypeLabel: '手机号注册',
                myAddressSlots: [
                    {
                        flex: 1,
                        defaultIndex: 1,        
                        values: Object.keys(myaddress),    //省份数组
                        className: 'slot1',
                        textAlign: 'center'
                    }, {
                        divider: true,
                        content: '-',
                        className: 'slot2'
                    }, {
                        flex: 1,
                        values: [],
                        className: 'slot3',
                        textAlign: 'center'
                    }
                ],
                showCity: false,
                city: '',
                pandc: ''
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.myAddressSlots[0].defaultIndex = 0        
            });
        },
        created() {
            let str = localStorage.getItem('dongHang_data')
            let obj = JSON.parse(str)
            this.params.agentId = obj.agentId
             this.resouceActions = [
                {
                    name: '手机号注册',
                    value: '0',
                    method: v => {
                        this.sourceTypeLabel = v.name
                        this.params.sourceType = v.value
                    }
                },
                {
                    name: '微信注册',
                    value: '1',
                    method: v => {
                        this.sourceTypeLabel = v.name
                        this.params.sourceType = v.value
                    }
                }
             ]
            this.reqData()
        },
        methods: {
            onMyAddressChange(picker, values) {
              if(myaddress[values[0]]){    //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
                    picker.setSlotValues(1, Object.keys(myaddress[values[0]])); //  Object.keys()会返回一个数组，当前省的数组
                    picker.setSlotValues(2, myaddress[values[0]][values[1]]); //  区/县数据就是一个数组
                    this.city = values[1]
                    this.params.city = values[1]
                    this.pandc = values[0] + ' ' + values[1]
                    
                }
            },
            reqData() {
                dataApi.getUserData(this.params).then(res => {
                    if (res.code == 0) {
                        this.data = res.t || []
                    } else {
                        Toast({
                            message: res.message,
                            duration: 2000
                        });
                    }
                })
            },
            goDetail({uid}) {
                this.$router.push({
                    name: 'userDataDetail',
                    query: {uid}
                })
            },
 
            searchValue(){
                this.popupVisible = false
                this.reqData()
                this.closeSearch()
            },
            closeSearch() {
                this.params.username = this.params.telephone = this.params.sourceType = this.params.city = ''
                this.popupVisible = false
            }
        }
    }
</script>
<style lang="less" scoped>
p {
    margin: 0;
    padding: 0;
}
    .user-data {
        font-size: .28rem;
        &-header {
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: .28rem;
            color:#282828;
            font-family: PingFangSC-Medium;
            border-bottom: .17rem solid #e8e8e8;
            span {
                color: #29abae;
                font-size: .4rem;
                padding: 0 2px;
            }
        }
        &-content {
            li {
                height: 70px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #e8e8e8;
                padding: 0 3%;
                img {
                    width: .89rem;
                    height: .88rem;
                    border-radius: 50%;
                }
                span {
                    display: flex;
                    align-items: center;
                    .username {
                        margin-left: .29rem;
                        font-size: .3rem;
                        color: #282828;
                    }
                    .city {
                        margin: 0 20px 0 1px;
                        font-size: .24rem;
                        color: #666666;
                    }
                }
            }
        }
    }
    .arrow {
        width: .12rem;
        height: .2rem;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url(../../assets/img/next-icon.png);
    }
    .icon-city {
        width: .35rem;
        height: .35rem;
        opacity: .5;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url(../../assets/img/icon-city.png);
    }
    .search-panel{
        width: 6.6rem;
        height: 100%;
        .form-item {
            height: .61rem;
            line-height: .61rem;
            width: 90%;
            margin: 0 auto;
            font-size: .3rem;
            position: relative;
            font-family: PingFangSC-Regular;
            input, .s-input {
                border: 1px solid #ccc;
                outline: none;
                height: 80%;
                width: 90%;
                border-radius: 5px;
                padding-left: 10px;
            }
            .s-input {
                display: inline-block;
                height: 90%;
            }
        }
        .label {
            height: .81rem;
            line-height: .81rem;
        }
        .sure-btn {
            display: flex;
            height: 50px;
            line-height: 50px;
            position: fixed;
            bottom: 0;
            width: 100%;
            background: #fff;
            border-top: 1px solid #e8e8e8;
            span {
                font-size: .3rem;
                width: 50%;
                text-align: center;
                &:nth-child(2) {
                    background: #29abae;
                    color: #fff;
                }
            }
        }
        .corner {
            display: flex;
            flex-direction: column;
            top: 0;
            opacity: .5;
            img {
                width: .3rem;
                right: .42rem;
                top: .5rem;
                position: absolute;
                &:nth-child(1) {
                    top: 5px;
                }
                &:nth-child(2) {
                    top: 11px;
                }
            }
        }
    }
    .province-panel {
        width: 100%!important;
        .provice-pop-btn {
            text-align: right;
            margin-right: .2rem;
            margin-top: 5px;
            span {
                background: #29abae;
                color: #fff;
                padding: 2px 5px;
                border-radius: 4px;
            }
        }
    }
    .form-province {
        display: flex;
        input {
            border: 1px solid #ccc;
            width: 80%!important;
        }
        .corner-pro {
            display: flex;
            flex-direction: column;
            position: relative;
            top: 0;
            opacity: .5;
            img {
                width: .3rem;
                right: .42rem;
                top: 14px;
                position: absolute;
                &:nth-child(1) {
                    top: 8px;
                }
                &:nth-child(2) {
                    top: 8px;
                }
            }
        }
    }
    .serach-btn {
        border-radius: 50%;
        background-color: rgb(41, 171, 174);
        box-shadow: 0px 3px 7px 0px rgba(4, 0, 0, 0.35);
        position: fixed;
        right: .5rem;
        bottom: 1.5rem;
        width: .92rem;
        height: .91rem;
        line-height: .9rem;
        text-align: center;
        z-index: 10;
        font-size: .30rem;
        color: #fff;
    }
</style>